<template>
  <div
    class="vc-search"
    :style="visual.parseStyle(props.compStyle)"
  >
    <div class="vc-search-input">
      <el-input :placeholder="props.compStyle['placeholder']" v-model="currValue" />
    </div>
    <div class="vc-search-icon">
      <cc-icon iconId="018dc9c3efe489a7d117" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import visual from "@/visual/js/visual";

const props = defineProps({
  node: Object,
  compStyle: Object,
});
const currValue = ref('');
</script>

<style scoped lang="scss">
.vc-search {
  .vc-search-input {
    flex-grow: 1;
    :deep(.el-input__wrapper) {
      background-color: transparent!important;
      border: none!important;
      box-shadow: none!important;
    }
  }
  .vc-search-icon {
    cursor: pointer;
  }
}
</style>